<template>
  <ContentDetailWrap>
    <template #header>
      <BaseButton @click="go(-1)">
        {{ t('common.back') }}
      </BaseButton>
    </template>
    <!--    表单-->
    <el-descriptions border :column="1">
      <el-descriptions-item :label="t('logisticsClassification.cc_name')" min-width="200px">
        {{ form.cc_name }}
      </el-descriptions-item>
      <el-descriptions-item :label="t('logisticsClassification.sellable_wids')" min-width="200px">
        <div>
          <span v-for="(item, idx) in form.sellable_wids" :key="item" style="margin-right: 8px">
            {{ (modelList.find((w) => w.value === item) || {}).label || item }}
            <span v-if="idx !== form.sellable_wids.length - 1">,</span>
          </span>
        </div>
      </el-descriptions-item>
      <el-descriptions-item :label="t('logisticsClassification.assignment')" min-width="200px">
        <div>
          <span
            v-for="(item, idx) in selectedCountries"
            :key="item.value"
            style="margin-right: 8px"
          >
            {{ item.name }}
            <span v-if="idx !== selectedCountries.length - 1">,</span>
          </span>
        </div>
      </el-descriptions-item>
    </el-descriptions>
  </ContentDetailWrap>
</template>

<script setup lang="ts">
import { ContentDetailWrap } from '@/components/ContentDetailWrap'
import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
import { getInfoApi } from '@/api/logisticsClassification'
import { getfirstWarehouseListApi } from '@/api/warehouse'
import { ref, reactive, nextTick, onMounted } from 'vue'
import type { CountryItem } from './components/countryDialog/types'

const { t } = useI18n()
const { push, go } = useRouter()
const { query } = useRoute()

interface ModelItem {
  label: string
  value: string | number
}

interface ApiResponseData {
  cc_name: string
  sellable_wids: (string | number)[]
  assignment: string[]
  countrys: CountryItem[]
}

interface FormData {
  cc_name: string
  sellable_wids: (string | number)[]
  assignment: string[]
  countrys: CountryItem[]
  countries: string[]
}

const modelList = ref<ModelItem[]>([])

// 添加静态选中的国家数据
const selectedCountries = ref<CountryItem[]>([])

const form = reactive<FormData>({
  cc_name: '',
  sellable_wids: [],
  assignment: [],
  countrys: [],
  countries: [] as string[]
})

//获取枚举
const getDropDownBoxInfo = async () => {
  const resp = await getfirstWarehouseListApi({ status: 1 })
  // 按照回显数据的顺序排序
  const sortWarehouseList = (list: ModelItem[]) => {
    const selectedItems = form.sellable_wids
    const unselectedItems = list.filter((item) => !selectedItems.includes(item.value))

    // 按照回显数据的顺序排列已选中的项
    const sortedSelectedItems = selectedItems
      .map((value) => list.find((item) => item.value === value))
      .filter((item): item is ModelItem => item !== undefined)

    // 将未选中的项按原顺序排在后面
    return [...sortedSelectedItems, ...unselectedItems]
  }
  modelList.value = sortWarehouseList(resp.data.list)
}

// 获取详情数据
const getDetail = async () => {
  if (!query.id) return
  const id = Array.isArray(query.id) ? query.id[0] : query.id
  if (!id) return
  const resp = await getInfoApi(id)
  if (resp.code === 0) {
    const data = resp.data as unknown as ApiResponseData
    form.cc_name = data.cc_name
    form.sellable_wids = data.sellable_wids
    form.countrys = data.countrys
    selectedCountries.value = data.countrys
    form.assignment = data.countrys.map((item) => item.name)
    // 获取仓库列表并按照回显数据排序
    getDropDownBoxInfo()
  }
}

onMounted(() => {
  getDropDownBoxInfo()
  getDetail()
})
</script>
<style lang="less" scoped></style>
